<template>
	<!-- <cusNavVue title="房源列表" bgColor="#87c1ed"></cusNavVue> -->
	<view class="swiper-wrap">
		<cusSwiperVue :swiperList="imgList"></cusSwiperVue>
	</view>
	<view class="house-description">
		房源列表
	</view>
	<view class="page-content">
		
		<view class="list-item" v-for="item in arr" :key="item.id">
			<button size="mini" @click.stop="editName(item)">修改名字</button>
			<view class="house-name" @click="goDetail(item._id)">
				小区名字：{{item.title}} 				
			</view>
			<view class="price">
				价格: {{item.unitPrice}}				
				<button size="mini" @click.stop="deleteHouse(item)">删除</button>
			</view>
			<view class="address">
				小区地址：{{item.address}}
			</view>
			<image :src="item.imgUrl" mode=""></image>
		</view>
		<view class="loading" v-if="pageInfo.loading">
			正在加载下一页数据
		</view>
		<view class="nomore" v-if="!pageInfo.isMore && !pageInfo.loading">
			没有更多数据了
		</view>
		<!-- <button @click="addHouse">添加房源</button> -->
	</view>
	<!-- <custTabVue></custTabVue> -->
	<diyTabVue></diyTabVue>

</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import cusSwiperVue from '../../components/cus-swiper/cus-swiper.vue';
	import diyTabVue from '../../components/diy-tab/diy-tab.vue';
	// import custTabVue from '../../components/cust-tab/cust-tab.vue';
	import cusNavVue from '../../components/cus-nav/cus-nav.vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const handlehouse = uniCloud.importObject('handlehouse')
	const arr = ref([])
	const imgList = ref([
		{id: 1, imgUrl: 'https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800'},
		{id: 2, imgUrl: 'https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800'},
		{id: 3, imgUrl: 'https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800'},
	])
	const goDetail = (id) => {
		uni.navigateTo({
			url: '/moduleA/detail/detail?id=' + id
		})
	}
	const pageInfo = reactive({
		pageSize: 10,
		pageNum: 1,
		total: 0,
		loading: false,
		isMore: true
	})
	const getData = () => {
		pageInfo.loading = true
		// 调用云函数的方法
		uniCloud.callFunction({
			name: "houseList", // 云函数的名字
			// 调用云函数传入的参数
			data: {
				pageNum: pageInfo.pageNum,
				pageSize: pageInfo.pageSize
			},
			// 获取云函数的返回信息
			success(res) {
				console.log(res.result)
				pageInfo.loading = false
				// 做上滑(触底)加载下一页数据的话，不能直接修改arr.value的值了，而是追加
				arr.value = [...arr.value, ...res.result.data]
				const total = res.result.total
				// 计算应该有多少条数据
				const totalNum = Math.ceil(total/pageInfo.pageSize) // 2
				if(pageInfo.pageNum >= totalNum) {
					pageInfo.isMore = false
				} else {
					pageInfo.isMore = true
				}
				uni.stopPullDownRefresh()
			}
		})
	}
	getData()
	onLoad((options) => {
		console.log(options)
		// {
		// 	name: '为今朝',
		// 	age: 20
		// }
		const name = options.name
	})
	// 添加房源按钮调用的方法
	const addHouse = () => {
		uniCloud.callFunction({
			name: "addHouse",
			data: {
				list: [{
						_id: '1005',
						id: '6',
						title: '碧桂园6',
						address: '北京市东城区6',
						imgUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
					},
					{
						_id: '1006',
						id: '7',
						title: '碧桂园7',
						address: '北京市东城区7',
						imgUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
					},
					{
						_id: '1007',
						id: '8',
						title: '碧桂园8',
						address: '北京市东城区8',
						imgUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
					},
					{
						_id: '1008',
						id: '9',
						title: '碧桂园9',
						address: '北京市东城区9',
						imgUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
					},
					{
						_id: '1009',
						id: '10',
						title: '碧桂园10',
						address: '北京市东城区10',
						imgUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
					},
					{
						_id: '1010',
						id: '11',
						title: '碧桂园11',
						address: '北京市东城区11',
						imgUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
					},
					
				]
			},
			success(res) {
				console.log(res)
			}
		})
	}
	// 监听页面滚动到底的事件
	onReachBottom(() => {
		console.log(pageInfo.isMore)
		if(pageInfo.isMore) {
			pageInfo.pageNum += 1
			getData()
		}
		
	})
	// 监听用户下拉
	onPullDownRefresh(() => {
		console.log('用户做了下拉操作')
		arr.value = []
		pageInfo.pageNum = 1
		getData()
	})
	const editName = async (item) => {
		const res = await handlehouse.editHouse({_id: item._id, newValue: {title: `这是"${item.title}"修改改后的名字`}})
		console.log(res)
		arr.value = []
		pageInfo.pageNum = 1
		getData()
	}
	const deleteHouse = async (item) => {
		const res = await handlehouse.deleteHouse(item._id)
		arr.value = []
		pageInfo.pageNum = 1
		getData()
	}
</script>

<style lang="scss">
	.page-content {
		// padding-top: 310rpx;
		margin-bottom: 180rpx;
	}
	// .swiper-wrap{
	// 	position: fixed;
	// 	width: 100vw;
	// 	// #ifdef MAP_Weixin
	// 	top: 0;
	// 	// #endif
	// 	z-index: 99;
	// }
	
	.house-description{
		background: #0000ff;
		z-index: 99;
		position: sticky;
		top: 88rpx;
	}
	.list-item {
		background: #87c1ed;
		margin-bottom: 20rpx;

		.house-name {
			height: 50rpx;
		}
	}
</style>